import React, { useEffect, useState } from 'react'
import Header from './components/Header/index.jsx'
import List from './components/List/index.jsx'
import Footer from './components/Footer/index.jsx'
import '../src/App.css'

export default function App() {
  const [todoList, setTodoList] = useState([])
  //刚渲染App时，去本地存储中查看是否保存有数据
  useEffect(() => {
    //去本地拿数据 拿到值以后直接设置进去 
    setTodoList(JSON.parse(localStorage.getItem('todoList'))|| [])
  }, []) //空数组只在初始化前查看
  //监听todoList 如果发生改变则在本地中保存
  useEffect(() => {
    //保存
    localStorage.setItem('todoList', JSON.stringify(todoList))
  }, [todoList]) //当todoList发生改变 才会调用

  return (
    <div className='todo-container'>
      <div className='todo-wrap'>
        <Header setTodoList={setTodoList} todoList={todoList} />
        <List todoList={todoList} setTodoList={setTodoList} />
        <Footer todoList={todoList} setTodoList={setTodoList} />
      </div>
    </div>
  )
}




